<template>
  <div class="houseManage">
    <h-header></h-header>
    <div class="content">
      <div class="sidebar">
        <div class="main-title">
          <i class="iconfont icon-4-copy"></i>
          <span class="font-18 text">菜单</span>
        </div>
        <div class="menu">
          <div class="menu-item" v-for="item in sideMenu" :key="item.id">
            <p
              class="font-16 title"
              @click="changetab(item.hash.funcname)"
              :class="{choosed:change==item.hash.funcname}"
            >{{item.hash.funcname}}</p>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="search_h">
          <p>租金查询</p>
        </div>
        <div class="search_div">
          <table width="100%">
            <tr>
              <td align="right">用途编号：</td>
              <td width="20%">
                <input type="text" v-model="ytbh">
              </td>
              <td align="right">房屋编号：</td>
              <td width="20%">
                <input type="text" v-model="detailnum">
              </td>
              <td align="right">承租人：</td>
              <td width="20%">
                <input type="text" v-model="renter">
              </td>


            </tr>
            <tr>
              <!-- <td align="right">审核人：</td>
              <td width="20%">
                <input type="text" v-model="checker">
              </td> -->

              <td align="right">审核状态：</td>
              <td>
                <select name id=" " class="selectC" v-model="checkstatus">
                  <option value selected>全部</option>
                  <option value="0">待审核</option>
                  <option value="1">审核通过</option>
                  <option value="5">审核不通过</option>
                  <option value="9">已删除</option>
                  <option value="10">已归档</option>
                </select>
              </td>
              <td align="right">缴费状态：</td>
              <td>
                <select name id=" " class="selectC" v-model="paytype">
                  <option value selected>全部</option>
                  <option value="1">已缴</option>
                  <option value="2">未缴</option>
                  <option value="3">欠缴</option>
                </select>
              </td>
              <td width="12%" align="right">管理单位：</td>
              <td width="21%">
                <select name class="selectC" v-model="jiedao">
                  <option value="" selected>全部</option>
                  <option
                    :value="item.hash.orgid"
                    v-for="item in zpArr"
                    :key="item.id"
                  >{{item.hash.orgname.replace(/;/g,"&nbsp;")}}</option>
                </select>
              </td>

            </tr>
            <tr>
              <td align="right">租金年度：</td>
              <td>
                <el-date-picker
                  v-model="zjyear"
                  style="height:30px;width:102%;float:left"
                  type="year"
                  valueFormat="yyyy"
                  placeholder="选择年"
                ></el-date-picker>
              </td>
              <td align="right">租金类型：</td>
              <td>
                <select name id=" " class="selectC" v-model="feetype1">
                  <option value selected>全部</option>
                  <option value="1">合同</option>
                  <option value="2">冲正</option>
                  <option value="3">退租</option>
                </select>
              </td>

            </tr>
          </table>
          <div class="searchbtn" @click="searchSearch(1)">搜索</div>
        </div>
        <div class="info-list">
          <!-- <table width="90%" class="table">
            <thead>
              <tr>
                <th>序号</th>
                <th>资产编号</th>
                <th>资产所在地址</th>
                <th>所属街镇</th>
                <th>房产类型</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody v-if="alldata.length">
              <nuxt-link tag="tr" v-for="(item,index) in alldata" :key="item.id" :to="{name: 'searchDetail',query:{hid:item.hash.hid}}"
                v-if="item.hash.hnum"
              >
                <td>{{index+1}}</td>
                <td>{{item.hash.hnum}}</td>
                <td>{{item.hash.haddr}}</td>
                <td>{{item.hash.jiedao}}</td>
                <td>{{item.hash.htype}}</td>
                <td>
                  <span style="color:#69f">查看</span>
                </td>
              </nuxt-link>
              <tr v-else>
                <td colspan="8">暂无数据</td>
              </tr>
            </tbody>
          </table>-->
          <el-table :data="alldata" border style="width:96%;margin:20px auto">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <!-- <el-table-column prop="hash.zcbh" label="资产编号"></el-table-column> -->
            <el-table-column prop="hash.rentnum" label="用途编号"></el-table-column>
            <el-table-column prop="hash.haddr" label="房产地址"></el-table-column>
            <el-table-column prop="hash.dstatus" label="房产状态"></el-table-column>
            <el-table-column prop="hash.glorg" label="管理单位"></el-table-column>
            <el-table-column prop="hash.detailnum" label="房屋编号"></el-table-column>
            <el-table-column prop="hash.renter" label="承租人"></el-table-column>
            <el-table-column prop="hash.zjnd" label="租金年度"></el-table-column>
            <el-table-column label="收租期限">
              <template slot-scope="scope">
                <span>{{scope.row.hash.feestart}}至{{scope.row.hash.feeend}}({{scope.row.hash.szqx}}天)</span>
              </template>
            </el-table-column>
            <el-table-column prop="hash.renttime" label="合同期限"></el-table-column>
            <el-table-column prop="hash.feeyear" label="应收租金(元)"></el-table-column>
            <el-table-column label="实收租金(元)">
              <template slot-scope="scope">
                <span v-if="scope.row.hash.status!='1'&&scope.row.hash.status!='10'"></span>
                <span v-else-if="scope.row.hash.feetype=='3'"> - {{scope.row.hash.realfee}}</span>
                <span v-else>{{scope.row.hash.realfee}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="hash.area1" label="有证面积(平方米)"></el-table-column>
            <el-table-column prop="hash.area2" label="无证面积(平方米)"></el-table-column> -->
            <el-table-column prop="hash.area" label="使用面积(㎡)"></el-table-column>
            <el-table-column label="租金类型">
              <template slot-scope="scope">
                <span v-if="scope.row.hash.feetype=='1'">合同</span>
                <span v-else-if="scope.row.hash.feetype=='2'">冲正</span>
                <span v-else>退租(手续费{{scope.row.hash.servicefee}})</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="审核状态">
              <template slot-scope="scope">
                <span v-if="scope.row.hash.status=='0'||scope.row.hash.status=='4'">待审核</span>
                <span v-else-if="scope.row.hash.status=='1'">审核通过</span>
                <span v-else-if="scope.row.hash.status=='5'" style="color:#f60">审核不通过</span>
                <span v-else-if="scope.row.hash.status=='9'">已删除</span>
                <span v-else>已归档</span>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="hash.jiedao" label="缴费状态">
              <template slot-scope="scope">
                <span v-if="scope.row.hash.paytype=='2'&&scope.row.hash.feetype=='1'">未缴</span>
                <span
                  v-if="scope.row.hash.paytype=='1'&&scope.row.hash.feetype=='1'"
                  style="color:#69f"
                >已缴</span>
                <span
                  v-if="scope.row.hash.paytype=='3'&&scope.row.hash.feetype=='1'"
                  style="color:#f60"
                >欠缴</span>
              </template>
            </el-table-column>
            <el-table-column prop="hash.op" label="创建人"></el-table-column>
            <el-table-column prop="hash.checker" label="审核人"></el-table-column> -->
            <!-- <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="gosearchdetail(scope.row)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <div class="pagination-wrapper">
            <div class="page_box">
              <table class="page_table">
                <tr>
                  <td
                    align="center"
                    valign="middle"
                    nowrap="nowrap"
                    style="border:0;padding-right: 10px;"
                  >
                    <a>
                      <font>
                        <p @click="searchSearch(1)">首页</p>
                      </font>
                    </a>
                  </td>
                  <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                    <a>
                      <font>
                        <p @click="searchSearch(num-1)">上一页</p>
                      </font>
                    </a>
                  </td>
                  <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                    <a>
                      <font>
                        <p @click="searchSearch(parseInt(num) + 1)">下一页</p>
                      </font>
                    </a>
                  </td>
                  <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                    <a>
                      <font>
                        <p @click="searchSearch(ys)">尾页</p>
                      </font>
                    </a>
                  </td>
                  <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                    <span>
                      <font>第{{this.num}}页</font>
                    </span>
                  </td>
                  <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                    <span>
                      <font>共{{this.ys}}页</font>
                    </span>
                  </td>
                  <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                    <span>
                      <font>共{{this.total}}条记录</font>
                    </span>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import HHeader from '~/components/common/header/Mheader';
import sideBar from '~/components/common/sidebar/sidebar';
import pagination from '~/components/common/pagination/pagination';

export default {
  data() {
    return {
      renter: '',
      ytbh: '',
      zjyear: '',
      paytype: '',
      zcbh: '',
      detailnum: '',
      op: '',
      feetype1: '',
      checker: '',
      checkstatus: '',
      sideMenu: [],
      htype: '',
      hnum: '',
      haddr: '',
      ts: this.newStore(),
      housedata3: [],
      housedata2: [],
      housedata: [],
      alldata: [],
      menuList: ['租金查询'],
      jiedao: '',
      village: '',
      ys: 1, // 分组
      total: 0, // 数据总数
      num: 1, // 当前页
      limit: '30', // 每组有多少条数据
    };
  },

  created() {
    this.getzp();
    this.getleixing();
    this.searchSearch(this.num);
    this.getjigou();
    this.getsideMenu();
    this.changetab('租金查询');
  },
  methods: {
    getzp() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BA442E5E7D07AB87B614E39228DA82270',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zpArr = ts.d.data.operation1;
        if (this.zpArr.length > 0) {
          const a = (this.zpArr[0].hash.orgname.match(/;/g) || []).length;
          console.log(a);
          for (let i = 0; i < this.zpArr.length; i += 1) {
            this.zpArr[i].hash.orgname = this.zpArr[i].hash.orgname.substring(a);
            console.log(this.zpArr[i].hash.orgname);
          }
        }
      });
    },
    changetab(tab) {
      this.change = tab;
      this.showTitle = this.change;
    },
    gosearchdetail(item) {
      this.$router.push({
        name: 'searchDetail',
        query: {
          hid: item.hash.hid,
          xh: item.hash.xh,
        },
      });
    },
    getsideMenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '209000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d);
        this.sideMenu = ts.d.data.operation1;
      });
    },
    // 获取下拉数据
    getleixing() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        supid: '1',
        codetype: '01',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.housedata3 = ts.d.data.operation1;
      });
    },
    // 获取sidebar信息
    getjigou() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD0ECC64278BA7F847',
        suporg: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.housedata = ts.d.data.operation1;
      });
    },
    getjigou2() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD0ECC64278BA7F847',
        suporg: this.jiedao,
      };
      if (this.jiedao != '') {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.housedata2 = ts.d.data.operation1;
        });
      } else {
        this.housedata2 = [];
      }
    },

    searchSearch(p_num) {
      if (p_num < 1) {
        p_num = 1;
      }
      if (p_num > this.ys && this.ys > 0) {
        p_num = this.ys;
      }
      let res;
      if (this.checkstatus == '0') {
        res = {
          handle:
            '76ABA4BE996F68CEF9A9763329C1A0DDE1CC419AEF1F1A79BFF0B9210751F692',
          token: localStorage.getItem('token'),
          zcbh: this.zcbh,
          detailnum: this.detailnum,
          op: this.op,
          status: '0',
          status1: '4',
          feetype: this.feetype1,
          zjnd: this.zjyear,
          checker: this.checker,
          paytype: this.paytype,
          jiedao: this.jiedao,
          rentnum: this.ytbh,
          renter: this.renter,
          start: p_num,
          limit: '50',
        };
      } else {
        res = {
          handle:
            '76ABA4BE996F68CEF9A9763329C1A0DDE1CC419AEF1F1A79BFF0B9210751F692',
          token: localStorage.getItem('token'),
          zcbh: this.zcbh,
          detailnum: this.detailnum,
          op: this.op,
          status: this.checkstatus,
          status1: this.checkstatus,
          checker: this.checker,
          feetype: this.feetype1,
          zjnd: this.zjyear,
          paytype: this.paytype,
          jiedao: this.jiedao,
          rentnum: this.ytbh,
          renter: this.renter,
          start: p_num,
          limit: '50',
        };
      }

      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        console.log(ts.d);
        this.alldata = ts.d.data.operation1;
        this.total = ts.d.data.operation2[0].hash.allrs;
        this.ys = ts.d.data.operation2[0].hash.ys;
        this.num = ts.d.data.operation2[0].hash.beg;
        this.limit = ts.d.data.operation2[0].hash.limit;
      });
    },
  },
  components: {
    HHeader,
    sideBar,
    pagination,
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.searchbtn {
  margin: 10px auto;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  background-color: #69f;
  color: #fff;
  border-radius: 5px;
  font-weight: 400;
  cursor: pointer;
}

.search_div {
  margin: 10px 0 10px 0px;
  padding: 8px 55px 8px 0px;
  border-bottom: 1px solid #ddd;
}

.search_div td {
  border: none !important;
  padding: 5px 8px;
}

.search_div input[type='text'], .search_div select {
  box-sizing: content-box;
  width: 100%;
  padding: 4px 0;
  text-indent: 5px;
  margin-left: 5px;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #333;
}

.pagination-wrapper {
  height: 60px;
  text-align: center;

  .page_table {
    margin: 0 auto;
    border: 0;
  }

  a {
    &:hover {
      text-decoration: underline;
      color: blue;
    }
  }

  .desc {
    display: inline-block;
    font-size: 14px;

    span {
      color: #666;

      i {
        padding: 0 3px;
        font-size: 16px;
        color: #25a4bb;
      }
    }
  }
}

.houseManage {
  width: 100%;

  .content {
    display: flex;
    width: 100%;
    min-height: 600px;

    .sidebar {
      flex: 0 0 200px;
      width: 200px;
      background: #F2F2F2;
      border-right: 1px solid #ccc;

      .main-title {
        flex: 1;
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-bottom: 2px solid #fff;
        color: #13227A;
        font-size: 0;

        .iconfont {
          display: inline-block;
          margin-right: 15px;
          font-size: 20px;
          text-indent: 1em;
        }

        .text {
          display: inline-block;
          font-weight: 600;
        }
      }

      .menu {
        display: block;
        width: 100%;
        text-indent: 2em;
        cursor: pointer;
        background: #f1f1f1;

        .title {
          height: 48px;
          line-height: 48px;
          border-bottom: 1px solid #ccc;
          padding-left: 10px;

          &.choosed {
            background: #fff;
          }
        }
      }
    }

    .main-content {
      flex: 1;
      min-height: 780px;

      .search_h {
        height: 44px;
        line-height: 44px;
        padding-left: 20px;
        background: #f2f2f2;
        border-bottom: 2px solid #fff;

        p {
          float: left;
          font-size: 16px;

          a {
            color: #69f;
          }

          span {
            font-size: 14px;
            padding-left: 15px;
          }

          .add-content {
            position: absolute;
            right: 20px;
            top: 35px;
            width: 100px;
            display: none;
            background: #fff;
            border: 1px solid #ccc;

            span {
              display: block;
              text-align: center;

              &:hover {
                background: #eee;
              }
            }
          }

          &:hover {
            .add-content {
              display: block;
            }
          }
        }
      }

      .search_c {
        width: 100%;
        padding: 8px 15px;
        border-bottom: 1px solid #f1f1f1;

        .billlist {
          margin-bottom: 15px;

          span {
            font-size: 14px;
            display: inline-block;
            width: 30%;
            min-width: 100px;

            &:first-child {
              padding-left: 20px;
            }

            .selectC {
              box-sizing: content-box;
              width: 190px;
              padding: 4px 5px;
              border-radius: 2px;
              font-size: 14px;
              color: #333;
              border: 1px solid #ccc;
            }

            input {
              box-sizing: content-box;
              width: 190px;
              padding: 4px 5px;
              margin-left: 5px;
              border-radius: 2px;
              border: 1px solid #ccc;
              color: #333;
            }
          }
        }

        .search {
          margin: 0 auto;
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          background-color: #69f;
          color: #fff;
          border-radius: 5px;
          font-weight: 400;
        }

        .import {
          .import-data {
            margin-bottom: 30px;
            margin-top: 30px;
            text-align: center;

            .text {
              font-size: 16px;
              display: inline-block;
              padding-top: 9px;
              margin-right: 15px;
            }

            input {
              display: inline-block;
              vertical-align: top;
              height: 34px;
              margin-right: 15px;
              border: 1px solid #ccc;
            }

            .select {
              display: inline-block;
              vertical-align: top;
              padding: 10px 15px;
              background: #87B87F;
              color: #fff;
            }
          }

          .import-btn {
            margin-bottom: 30px;

            span {
              display: inline-block;
              vertical-align: top;
              padding: 12px;
              background: #87B87F;
              color: #fff;

              &:nth-of-type(1) {
                margin-right: 30px;
              }
            }
          }

          .import-desc {
            position: fixed;
            top: 500px;

            p {
              font-size: 16px;
              line-height: 24px;
              color: #666;
            }
          }
        }
      }

      .search-add {
        float: right;
        margin: 8px 25px 15px 10px;
        cursor: pointer;
        float: right;
        margin-right: 10%;

        .add-btn {
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 5px;
          background: #69f;

          span {
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
